<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-row :gutter="20">
          <el-col :span="3"
            ><div class="grid-content ep-bg-purple" />
            <img src="@/assets/logo.png" alt="" class="img"
          /></el-col>
          <el-col :span="18"
            ><div class="grid-content ep-bg-purple" />
            <h2>后台管理系统</h2></el-col
          >
          <el-col :span="3"
            ><div class="grid-content ep-bg-purple" />
            <div class="left">
              <el-avatar :size="50" :src="$store.state.user.userInfo.avatar" />
              <div class="name">{{ $store.state.user.userInfo.name }}</div>
            </div>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <span style="color: #fff">选项</span>
                <el-icon class="el-icon--right" color="#fff">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="/index/notice" text-color="#fff" router>
            <el-menu-item index="/index/notice">
              <el-icon><Document /></el-icon>
              <span>实时通知</span>
            </el-menu-item>
            <el-menu-item index="/index/roleapply">
              <el-icon><Postcard /></el-icon>
              <span>权限申请</span>
            </el-menu-item>
            <el-menu-item index="/index/personal">
              <el-icon><User /></el-icon>
              <span>个人中心</span>
            </el-menu-item>
            <el-menu-item index="/index/employee" :disabled="!($store.state.user.userInfo.role === 1)">
              <el-icon><icon-menu /></el-icon>
              <span>员工管理</span>
            </el-menu-item>
            <el-menu-item index="/index/audit" :disabled="!($store.state.user.userInfo.role === 1)">
              <el-badge :value="count" :max="10" :hidden="count === 0">
                <el-icon><Stamp /></el-icon>
                <span>申请审核</span>
              </el-badge>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main><router-view /></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { Document, Menu as IconMenu, User, Postcard, Stamp, ArrowDown } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import $http from '@/request/http'
import { computed, onMounted, reactive } from '@vue/runtime-core'
import { initAuditData } from '@/type/roleApply'
import emitter from '@/utils/emitter'
const $store = useStore()
const $router = useRouter()

const data = reactive(new initAuditData())
async function getRoleApplyList() {
  const { data: res } = await $http.get('api/role/roleapplylist')
  data.applyList = res
}
onMounted(()=>{
  getRoleApplyList()
  emitter.on('updCount', getRoleApplyList)
})
const count = computed(()=>{
  return data.applyList.filter(item => item.apply_status === 0).length
})

const handleCommand = (command: string | number | object) => {
  if (command === 'logout') {
    ElMessageBox.confirm('即将退出登录， 要继续么?', '退出登录', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
      .then(() => {
        localStorage.removeItem('token')
        $router.push('/login')
        $store.dispatch('user/clearUserInfo')
        ElMessage({
          type: 'success',
          message: '已退出',
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消退出',
        })
      })
  }
}
</script>

<style scoped lang="less">
.common-layout {
  height: 100%;
}
.el-header {
  display: flex;
  height: 120px;
  color: #fff;
  background-color: #545c64;

  .el-row {
    width: 100%;
    .img {
      width: 120px;
      height: 120px;
      margin-left: 20px;
    }
    h2 {
      font-size: 30px;
      line-height: 120px;
      letter-spacing: 2px;
    }
    .el-col:last-child {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
        .name {
          height: 30px;
          margin-top: 10px;
        }
      }
    }
  }
}
.el-container {
  height: 100%;
  .el-menu {
    height: 100%;
  }
}
.el-badge {
  width: 100%;
}
</style>
